<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="轮播列表" name="first">
		<div style="float: right;margin-right:2%;">
		    <el-button style='margin: 10px 0;' :disabled="!isAuth('storeList:add')" size="mini" type="primary" icon="document" @click="advertNotice">添加轮播</el-button>
		  </div>
		  <el-table
		  v-loading="tableDataLoading"
		    :data="guangaoData">
		  <el-table-column
		    fixed
		   prop="id"
		   label="编号"
		   width="80">
		   </el-table-column>
		   <el-table-column
		    prop="imgUrl"
		    label="图片地址">
		    <template slot-scope="scope">
		      <img :src="scope.row.imgUrl" alt="" width="170px" height="60">
		    </template>
		    </el-table-column>
		    <el-table-column
		     prop="linkUrl"
		     label="跳转链接">
		     </el-table-column>

			 <el-table-column
			  prop="sort"
			  label="权重">
			  </el-table-column>

				<el-table-column
				 prop="typeName"
				 label="轮播地址">
				 </el-table-column>

			  <el-table-column
			   prop="typeName"
			   label="应用地址"
			   slot="empty">

			   </el-table-column>

		    <el-table-column
		    prop="createTime"
		    label="创建时间">
		    </el-table-column>
		    <el-table-column
		      label="操作"
		      width="150">
		      <template slot-scope="scope">
		        <el-button
		          size="mini"
		          type="primary"
		      :disabled="!isAuth('storeList:update')"
		          @click="advertUpdates(scope.$index, scope.row)">修改
		        </el-button>
		        <el-button
		          size="mini"
		          type="danger"
					:disabled="!isAuth('storeList:delete')"
		          @click="advertdeletes(scope.row)">删除
		        </el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  <!-- 添加广告 -->
		  <el-dialog title="添加轮播" :visible.sync="dialogFormVisible" center>
		    <div style="margin-bottom: 10px;display: flex;">
		      <span style="width: 200px;display: inline-block;text-align: right;">图片地址：</span>
		      <div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		        <el-upload
		          class="avatar-uploader"
		          v-model="imgUrl"
		          action="https://admin.koudaidj.com/game/alioss/upload"
		          :show-file-list="false"
		          :on-success="handleAvatarSuccess"
		          >
		          <img v-if="imgUrl" :src="imgUrl" class="avatar" style="border-radius: 6px;width:148px;height: 148px;"/>
		          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		        </el-upload>
		      </div>
		    </div>
		    <div style="margin-bottom: 10px;">
		      <span style="width: 200px;display: inline-block;text-align: right;">跳转地址：</span>
		      <el-input style="width:50%;" v-model="linkUrl" placeholder="请输入跳转地址"></el-input>
		    </div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">权重：</span>
			  <el-input style="width:50%;" v-model="sort" placeholder="请输入权重"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">轮播地址：</span>
			 <el-select v-model="value" placeholder="请选择">
			     <el-option
			       v-for="item in options"
			       :key="item.id"
			       :label="item.name"
			       :value="item.id">
			     </el-option>
			   </el-select>
			  <!-- <el-input style="width:50%;" v-model="type" placeholder="请输入轮播地址"></el-input> -->
			</div>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="advertNoticeTo()">确 定</el-button>
		    </div>
		</el-dialog>
		<!-- 修改轮播 -->
		<el-dialog title="修改轮播" :visible.sync="dialogFormVisible1" center>
			<el-form :model="form">
				<el-form-item label="图片地址：" :label-width="formLabelWidth" >
				 <div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height:148px;">
					<el-upload
						class="avatar-uploader"
						v-model="imgUrl"
						action="https://admin.koudaidj.com/game/alioss/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess1"
						>
						<img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" style="border-radius: 6px;width:148px;height: 148px;"/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				 </div>
				</el-form-item>
			  <el-form-item label="跳转地址：" :label-width="formLabelWidth" >
			    <el-input v-model="form.linkUrl" style="width:65%;"></el-input>
			  </el-form-item>
			  <el-form-item label="权重：" :label-width="formLabelWidth" >
			    <el-input v-model="form.sort" style="width:65%;"></el-input>
			  </el-form-item>
			  <div style="margin-bottom: 10px;">
			    <span style="width: 200px;display: inline-block;text-align: right;">轮播地址：</span>
			   <el-select v-model="value" placeholder="请选择">
			       <el-option
			         v-for="item in options"
			         :key="item.id"
			         :label="item.name"
			         :value="item.id">
			       </el-option>
			     </el-select>
			    <!-- <el-input style="width:50%;" v-model="type" placeholder="请输入轮播地址"></el-input> -->
			  </div>
			</el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
		    <el-button type="primary" @click="amendadvertTo()">确 定</el-button>
		  </div>
		</el-dialog>
      </el-tab-pane>
      <el-tab-pane label="轮播类型管理" name="second">
        <BannerType></BannerType>
      </el-tab-pane>
    </el-tabs>
	</div>
</template>

<script>
  import BannerType from '@/views/store/components/BannerType'
	export default {
    components:{
      BannerType
    },
	    data() {
	      return {
			  empty:"暂无数据",
			  options: [],
        value: '',
				size:5,
				page:1,
				imgUrl:'',
				linkUrl:'',
				sort:'',
				form:{
					id:'',
					imgUrl:'',
					linkUrl:'',
					sort:'',
					createTime:'',
					type:'',
				},
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				guangaoData:[],

        activeName: 'first',
			}
		},
		methods: {
			handleAvatarSuccess(file) {
			   this.imgUrl = file.data;
			},
			handleAvatarSuccess1(file) {
			     this.form.imgUrl = file.data;
			},
			 // 刷新
			refresh(){
			   this.choicenSelect()
			   this.handpick()
			},
			// 添加轮播弹框
			advertNotice(){
				this.dialogFormVisible = true
			},
			// 添加轮播
			advertNoticeTo(){
				if (this.linkUrl == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入跳转链接',
				        type: 'warning'
				    });
				    return
				}
				if (this.imgUrl == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传轮播图',
				        type: 'warning'
				    });
				    return
				}
				if (this.sort == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入权重',
				        type: 'warning'
				    });
				    return
				}
				if (this.value == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入轮播地址',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/banner/save'),
				  method: 'post',
				  data: this.$http.adornData({
					'imgUrl':this.imgUrl,
					'linkUrl':this.linkUrl,
					'sort':this.sort,
					'type':this.value,
				  })
				}).then(({data}) => {
					this.dialogFormVisible = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						this.imgUrl = ''
						this.linkUrl = ''
						this.sort = ''
				        this.guangaoSelect()
				      }
				    })
				})
			},
			// 修改广告
			advertUpdates(index,rows){
				this.dialogFormVisible1=true;
				this.form.id = rows.id;
				this.form.imgUrl = rows.imgUrl;
				this.form.linkUrl = rows.linkUrl;
				this.form.sort = rows.sort;
				this.form.createTime = rows.createTime;
				this.form.type = rows.type
			},
			// 修改广告
			amendadvertTo(){
				if (this.form.linkUrl == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入跳转链接',
				        type: 'warning'
				    });
				    return
				}
				if (this.form.imgUrl == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传轮播图',
				        type: 'warning'
				    });
				    return
				}
				if (this.form.sort == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入权重',
				        type: 'warning'
				    });
				    return
				}
				if (this.value == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入轮播地址',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/banner/update'),
				  method: 'post',
				  data: this.$http.adornData({
					'id':this.form.id,
					'imgUrl': this.form.imgUrl,
					'linkUrl': this.form.linkUrl,
					'sort':this.form.sort,
					'createTime':this.form.createTime,
					'type':this.value,

				  })
				}).then(({data}) => {
					 this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.guangaoSelect()
				      }
				    })
				})
			},
			// 删除广告
			advertdeletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				    url: this.$http.adornUrl2('/banner/delete'),
				    method: 'get',
				    params: this.$http.adornParams({
						'id':row.id
				    })
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.guangaoSelect()
						}
					  })
				  })
				}).catch(() => {})
			},
      getBannerType(){
        this.$http({
          url: this.$http.adornUrl2('/banner/findType'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          let returnData = data.data;
          console.log(returnData)
          this.options = returnData
        })
      },
			// 获取轮播数据
			guangaoSelect () {
				this.tableDataLoading = true
				this.$http({
				url: this.$http.adornUrl2('/banner/list'),
				method: 'get',
				params: this.$http.adornParams({
				})
				}).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					console.log(returnData)
					this.guangaoData = returnData
				})
			},
		},
		mounted() {
      this.getBannerType()
			this.guangaoSelect()
		}
	  };
</script>

<style>
	.customWidth{
	  width: 80%!important;
	}
</style>
